行高設定

css

.line-height-tight { line-height: 1.25; }
.line-height-normal { line-height: 1.5; }
.line-height-relaxed { line-height: 1.75; }
.line-height-loose { line-height: 2; }

html

<div class="line-height-tight">
    <strong>line-height: 1.25 (緊湊)</strong><br>
    這是一段示範文字，行距比較窄，看起來文字之間距離很近。
  </div>

  <div class="line-height-normal">
    <strong>line-height: 1.5 (正常)</strong><br>
    這是一段示範文字，行距正常，最常用於一般段落，閱讀感舒服。
  </div>

  <div class="line-height-relaxed">
    <strong>line-height: 1.75 (放鬆)</strong><br>
    這是一段示範文字，行距較寬，整體感覺比較輕鬆，不擁擠。
  </div>

  <div class="line-height-loose">
    <strong>line-height: 2 (寬鬆)</strong><br>
    這是一段示範文字，行距非常寬，適合標語或特殊設計用。
  </div>

字母間距

css

.tracking-tight { letter-spacing: -0.05em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.05em; }
.tracking-wider { letter-spacing: 0.1em; }

html

<div class="tracking-tight">
    <strong>tracking-tight (-0.05em)</strong><br>
    字距比較緊湊，看起來字和字之間靠得很近。
  </div>

  <div class="tracking-normal">
    <strong>tracking-normal (0)</strong><br>
    預設字距，正常顯示，最常用於一般文章。
  </div>

  <div class="tracking-wide">
    <strong>tracking-wide (0.05em)</strong><br>
    字距稍微加寬，適合副標題或強調文字。
  </div>

  <div class="tracking-wider">
    <strong>tracking-wider (0.1em)</strong><br>
    字距更寬，適合大標題、Logo 或設計感文字。
  </div>

實用的文字區塊

css

.article-content {
max-width: 700px;/* 區塊最大寬度 700px，避免文字太寬難讀 */
margin: 0 auto;/* 左右自動置中，區塊會在頁面正中間 */
font-size: 18px;/* 文字大小 18px，比一般預設 16px 更清晰 */
line-height: 1.8;/* 行距 1.8 倍，讓文字更好讀 */
color: #333;/* 深灰文字，比純黑更柔和 */
}

.article-content p {
margin-bottom: 1.5em;/* 段落之間留空隙 */
text-align:justify;/* 文字左右對齊，像書本文字排版 */
}

.article-content h2 {
margin-top: 2.5em;/* 標題上方留比較多空間 */
margin-bottom: 1em; /* 標題下方留一點空隙 */
color: #2c3e50;/* 深藍灰色，比正文更突出 */
border-bottom: 2px solid #ecf0f1;/* 標題底線，區分層次 */
padding-bottom: 10px;/* 標題和底線之間留一點空間 */
}

html

<div class="article-content">
    <h1>文章標題：前端排版設計</h1>

    <p>
      在網頁設計中，良好的排版能大幅提升使用者的閱讀體驗。
      適當的字體大小、行距與段落間距，能讓文章更容易被閱讀與理解。
    </p>

    <p>
      若文字過於擁擠或行距過窄，讀者會覺得眼睛疲勞；
      相反地，若行距與字距適中，閱讀感會更舒適自然。
    </p>

    <h2>小節標題：文字排版的原則</h2>

    <p>
      文字排版講求平衡，包含字體大小、顏色對比、段落間距、標題層次等。
      在設計文章區塊時，需兼顧可讀性與美觀性，才能讓內容更具吸引力。
    </p>
  </div>